<template>
  <div class="crud-content">
    <div class="search"><div :is="dynamicForm" :schema="config.search" :model="model.search"></div></div>
    <div class="data-list">
      <div :is="DataGrid" :config="config.grid" ref="gridInstance"></div>
    </div>
    <modal ref="updateModalInstance"
           :title="updateModalConfig.title"
           :disableEscClose="updateModalConfig.disableEscClose"
           :staticModal="updateModalConfig.staticModal"
           :showClose="updateModalConfig.showClose">
      <div :is="dynamicForm" :schema="updateModalConfig.form" :model="updateModel"></div>
    </modal>
  </div>
</template>

<script>
  import _ from 'lodash'
  import Promise from 'promise'
  import Vue from 'vue'
  import DataGrid from '../../../../libs/data-grid'
  import DynamicForm from '../../../../libs/dynamic-form'
  import Modal from '../../../../libs/modal/Modal.vue'

  let gridInstance
  let config = {
    title: '用户',
    search: {
      formClass: 'df-form-inline',
      fields: [
        {
          componentType: 'InputText',
          name: 'keyword',
          label: '关键字'
        }
      ],
      actions: [
        {
          type: 'submit',
          label: '查询'
        }
      ],
      submitHandler () {
        let rst = gridInstance.reload()
        if (rst && rst.then instanceof Function) {
          return rst
        } else {
          return true
        }
      }
    },
    grid: {
      rowHeight: 30,
      dataSource (pageIndex, pageSize) {
        return loadData()
      },
      columns: [
        {
          field: '$index',
          title: '序号'
        },
        {
          field: 'name',
          title: '名称'
        },
        {
          field: 'sex',
          title: '性别',
          cellRenderer (val) {
            return val ? '男' : '女'
          }
        },
        {
          field: 'operation',
          title: '操作',
          cellTemplate: `<div>\
                            <button class="btn btn-xs btn-primary" @click="updateModal($event, data.data)">编辑</button>\
                            <button class="btn btn-xs btn-danger">删除</button>\
                        </div>`,
          context: {updateModal}
        }
      ],
      pagination: {}
    }
  }

  let model = {
    search: {
      keyword: ''
    },
    edit: null,
    create: null
  }

  function loadData () {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        let obj = {
          name: '李',
          sex: 1
        }
        let ds = []
        for (let i = 0; i < 100; i++) {
          let o = _.clone(obj)
          obj.name += i
          ds.push(o)
        }
        resolve({data: ds, totalCount: 1000})
      }, 3000)
    })
  }

  let updateModalConfig = {
    title: '修改' + config.title,
    form: {
      formClass: 'df-form-horizontal df-form-grid-2',
      fields: [
        {
          componentType: 'InputText',
          name: 'name',
          label: '名称'
        },
        {
          componentType: 'InputRadio',
          name: 'sex',
          label: '性别',
          labelProp: 'value',
          valueProp: 'key',
          dataSource: [{key: 0, value: '女'}, {key: 1, value: '男'}]
        }
      ],
      actions: [
        {
          type: 'button',
          label: '取消',
          buttonClass: 'btn btn-default'
        },
        {
          type: 'submit',
          label: '保存',
          buttonClass: 'btn btn-primary'
        }
      ],
      submitHandler () {
        return true
      }
    }
  }

  let createModalConfig = {}

  let $this
  let updateModalInstance
  function updateModal (evt, data) {
    evt.preventDefault()
    evt.stopPropagation()
    console.log('data', data)
    Vue.set($this, 'updateModel', data)
    updateModalInstance && updateModalInstance.open()
  }

  export default {
    components: {Modal},
    data () {
      return {
        dynamicForm: DynamicForm,
        DataGrid,
        model,
        config,
        updateModalConfig,
        createModalConfig,
        updateModel: {},
        createModel: {}
      }
    },
    mounted () {
      $this = this
      gridInstance = this.$refs.gridInstance
      updateModalInstance = this.$refs.updateModalInstance
    }
  }
</script>

<style lang="scss">
  .crud-content{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;

    .search{
    }
    .data-list{
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
    }
  }

</style>
